﻿<div>
    <MCard Class="d-flex align-content-start flex-wrap" Color="grey lighten-2" Flat Tile Height="200">
        @for (var i = 1; i <= 20; i++)
        {
            <MCard Class="pa-2" Outlined Tile>
                Flex item
            </MCard>
        }
    </MCard>
</div>

<br/>

<div>
    <MCard Class="d-flex align-content-end flex-wrap" Color="grey lighten-2" Flat Tile Height="200">
        @for (var i = 1; i <= 20; i++)
        {
            <MCard Class="pa-2" Outlined Tile>
                Flex item
            </MCard>
        }
    </MCard>
</div>

<br/>

<div>
    <MCard Class="d-flex align-content-center flex-wrap" Color="grey lighten-2" Flat Tile Height="200">
        @for (var i = 1; i <= 20; i++)
        {
            <MCard Class="pa-2" Outlined Tile>
                Flex item
            </MCard>
        }
    </MCard>
</div>

<br/>

<div>
    <MCard Class="d-flex align-content-space-between flex-wrap" Color="grey lighten-2" Flat Tile Height="200">
        @for (var i = 1; i <= 20; i++)
        {
            <MCard Class="pa-2" Outlined Tile>
                Flex item
            </MCard>
        }
    </MCard>
</div>

<br/>

<div>
    <MCard Class="d-flex align-content-space-around flex-wrap" Color="grey lighten-2" Flat Tile Height="200">
        @for (var i = 1; i <= 20; i++)
        {
            <MCard Class="pa-2" Outlined Tile>
                Flex item
            </MCard>
        }
    </MCard>
</div>
